<template>
  <el-card class="form-card" shadow="hover">
    <template #header>
      <div class="card-header">
        <h3>物品信息</h3>
      </div>
    </template>
    
    <el-form-item label="物品类型" prop="itemType">
      <el-select v-model="modelValue.itemType" placeholder="请选择物品类型" style="width: 100%" @change="handleInput">
        <el-option label="文件" value="document" />
        <el-option label="服装" value="clothing" />
        <el-option label="电子产品" value="electronics" />
        <el-option label="生活用品" value="daily" />
        <el-option label="食品" value="food" />
        <el-option label="其他" value="other" />
      </el-select>
    </el-form-item>
    
    <el-form-item label="重量(kg)" prop="weight">
      <el-input-number 
        v-model="modelValue.weight" 
        :min="0.1" 
        :precision="1" 
        :step="0.5" 
        @change="handleWeightChange" 
        style="width: 100%" 
      />
    </el-form-item>
    
    <el-form-item label="体积(cm³)" prop="volume">
      <div class="volume-inputs">
        <el-input-number v-model="modelValue.length" :min="1" :step="1" placeholder="长" @change="handleVolumeChange" />
        <span class="multiply-sign">×</span>
        <el-input-number v-model="modelValue.width" :min="1" :step="1" placeholder="宽" @change="handleVolumeChange" />
        <span class="multiply-sign">×</span>
        <el-input-number v-model="modelValue.height" :min="1" :step="1" placeholder="高" @change="handleVolumeChange" />
      </div>
      <div class="volume-result">
        体积: {{ modelValue.volume }} cm³
        <el-tooltip content="体积重 = 体积(cm³) / 6000">
          <span>, 体积重: {{ (modelValue.volume / 6000).toFixed(2) }} kg</span>
        </el-tooltip>
      </div>
    </el-form-item>
    
    <el-form-item label="保价金额(元)" prop="declaredValue">
      <el-input-number 
        v-model="modelValue.declaredValue" 
        :min="0" 
        :step="100" 
        style="width: 100%" 
        @change="handleInput" 
      />
    </el-form-item>
    
    <el-form-item label="备注" prop="remark">
      <el-input 
        v-model="modelValue.remark" 
        type="textarea" 
        :rows="2" 
        placeholder="可输入特殊要求或注意事项" 
        @input="handleInput"
      />
    </el-form-item>
  </el-card>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

interface ItemData {
  itemType: string
  weight: number
  length: number
  width: number
  height: number
  volume: number
  declaredValue: number
  remark: string
}

const props = defineProps<{
  modelValue: ItemData
}>()

const emit = defineEmits<{
  'update:modelValue': [value: ItemData]
  'volumeChange': []
  'weightChange': []
}>()

const handleInput = () => {
  emit('update:modelValue', { ...props.modelValue })
}

const handleVolumeChange = () => {
  if (props.modelValue.length && props.modelValue.width && props.modelValue.height) {
    props.modelValue.volume = props.modelValue.length * props.modelValue.width * props.modelValue.height
  } else {
    props.modelValue.volume = 0
  }
  emit('volumeChange')
  handleInput()
}

const handleWeightChange = () => {
  emit('weightChange')
  handleInput()
}
</script>

<style scoped>
.form-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.volume-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.multiply-sign {
  color: #909399;
}

.volume-result {
  margin-top: 8px;
  font-size: 13px;
  color: #606266;
}
</style>